/* eslint-disable prettier/prettier */
import * as echarts from 'echarts'
import { fontSize } from './fontSize'
/**
 *
 * @method 图表绘制(折线图柱状图)
 * @param id
 * @param names
 * @param data
 */
export function initChart(id, names, data) {
  var dom = document.getElementById(id)

  var myChart = echarts.init(dom)

  const options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        lineStyle: {
          // 直线指示器样式设置
          width: 2,
          type: 'solid'
        },
        shadowStyle: {
          // 阴影指示器样式设置
          width: 'auto', // 阴影大小
          color: 'rgba(1, 182, 255,0.20)' // 阴影颜色
        }
      }
    },
    hideDelay: 100, // 隐藏延迟，单位ms
    transitionDuration: 0.4, // 动画变换时间，单位s
    backgroundColor: 'rgba(255,255, 255,0.5)', // 提示框浮层的背景颜色。
    borderColor: 'rgba(255,255, 255,0)',
    borderRadius: 0,
    borderWidth: 1, // 提示框浮层的边框宽。
    padding: 5, // 提示框浮层内边距，
    textStyle: {
      fontSize: 10,
      align: 'left',
      color: '#000'
    },
    legend: {
      // 图例
      right: 0,
      icon: 'roundRect',
      itemHeight: 2,
      itemWidth: 15,
      itemGap: 20,
      textStyle: {
        fontSize: fontSize(20),
        color: '#000000'
      }
    },
    grid: {
      top: fontSize(85),
      left: fontSize(5),
      right: fontSize(20),
      bottom: fontSize(5),
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: names,
        axisTick: {
          show: true,
          inside: true,
          alignWithLabel: true,
          lineStyle: {
            width: fontSize(2), // 设置刻度线宽度
            type: 'dashed', // 设置刻度线类型
            dashOffset: fontSize(10)
          }
        },
        axisLine: {

          show: true

        },
        splitLine: {

          show: false

        },
        axisLabel: {
          fontSize: fontSize(12), // 设置 x 轴字体大小
          color: '#95A8C0', // 设置 x 轴字体颜色
          margin: fontSize(2)
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#2b3444',
            type: 'dashed'
          }
        }
      }
    ],
    series: [
      {
        name: 'one',
        type: 'line',
        showSymbol: false,
        data: data[0],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#1968FF',
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(8,132,245,0.7)'
                  },
                  {
                    offset: 0.3,
                    color: 'rgba(8,132,245,0.4)'
                  },
                  {
                    offset: 0.7,
                    color: 'rgba(8,132,245,0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(8,132,245,0.1)'
                  }
                ]
              }
            }
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      },
      {
        name: 'two',
        type: 'line',
        showSymbol: false,
        data: data[1],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#f36269',
            lineStyle: {
              color: '#f36269'
            }
          }
        },
        areaStyle: {
          opacity: 0.25,
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      },
      {
        name: 'three',
        type: 'line',
        showSymbol: false,
        data: data[2],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#F2A127',
            lineStyle: {
              color: '#F2A127'
            }
          }
        },
        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      },
      {
        name: 'four',
        type: 'line',
        showSymbol: false,
        data: data[3],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#00CCE3',
            lineStyle: {
              color: '#00CCE3'
            }
          }
        },
        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      },
      {
        name: 'five',
        type: 'line',
        showSymbol: false,
        data: data[4],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#00CCE3',
            lineStyle: {
              color: '#00CCE3'
            }
          }
        },
        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      },
      {
        name: 'six',
        type: 'line',
        showSymbol: false,
        data: data[5],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#00CCE3',
            lineStyle: {
              color: '#00CCE3'
            }
          }
        },
        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      },
      {
        name: 'seven',
        type: 'line',
        showSymbol: false,
        data: data[6],
        smooth: true,
        showBackground: true,
        itemStyle: {
          normal: {
            color: '#00CCE3',
            lineStyle: {
              color: '#00CCE3'
            }
          }
        },
        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(8,132,245,0.7)'
              },
              {
                offset: 0.3,
                color: 'rgba(8,132,245,0.4)'
              },
              {
                offset: 0.7,
                color: 'rgba(8,132,245,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(8,132,245,0.1)'
              }
            ]
          }
        }
      }
    ]
  }

  myChart.setOption(options)
}

